<script setup lang="ts">
import SvgIcon from './SvgIcon/index.vue';
// interface
interface menuTemplate {
  id: number,
  menuName: String,
  path: String,
  icon: string,
  subMenu: Array<menuTemplate> | undefined
}

// sub-Components props
defineProps({
  collapse: Boolean,
  menu: Array as () => Array<menuTemplate>,
})

</script>


<template>
  <!-- menu -->
  <el-menu
    default-active="/index/bigScreen"
    class="el-menu-vertical-demo"
    :collapse="collapse"
    :router="true"
    :unique-opened="true"
  >
    <span v-for="item in menu">
      <el-sub-menu v-if="item.subMenu" :index="item.path">
        <template #title>
          <el-icon>
            <svg-icon :name="item.icon"></svg-icon>
          </el-icon>
          <span :style="collapse ? 'display: none' : 'display: true'">{{ item.menuName }}</span>
        </template>
        <el-menu-item v-for="subItem_s in item.subMenu" :index="subItem_s.path">
          <template #title>
            <el-icon>
              <svg-icon :name="subItem_s.icon"></svg-icon>
            </el-icon>
            <span>{{ subItem_s.menuName }}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
        <el-icon>
          <svg-icon :name="item.icon"></svg-icon>
        </el-icon>
        <span :style="collapse ? 'display: none' : 'display: true'">{{ item.menuName }}</span>
      </el-menu-item>
    </span>
  </el-menu>
</template>


<style scoped lang="scss">
</style>
